<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
  <style>
    li {
      list-style: none;
    }

    body {
      background-color: blanchedalmond;
    }

    #wrap {
      position: relative;
      width: 820px;
      height: 547px;
      margin: 200px auto;
      overflow: hidden;
    }

    .imgList {
      display: flex;
      position: relative;
      left: 0;
      width: 100%;
      height: 100%;
      transition: all 0.5s;
    }

    .imgList img {
      width: 100%;
      height: 100%;
    }

    #wrap a {
      position: absolute;
      top: 0;
      top: 50%;
      transform: translate(0, -50%);
      display: block;
      width: 40px;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      color: white;
      text-decoration: none;
      line-height: 547px;
      text-align: center;
    }

    .arrow .left {
      left: 0;
    }

    .arrow .right {
      right: 0;
    }

    .circle-list {
      position: absolute;
      display: flex;
      width: 350px;
      height: 50px;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 9;

    }

    .circle-list>.circle {
      width: 50px;
      height: 50px;
      /* background-color: pink; */
      border-radius: 50%;
      margin: 5px;
      background-size: cover;
      cursor: pointer;
      /* border: 5px solid rgba(255, 255, 255, 0.5); */
      background-position: -10px;
    }

    .circle-list>.active {
      border: 5px solid rgba(255, 255, 255, 0.5);
    }

    .circle-list>.circle:nth-child(1) {
      background-image: url(./images/01.jpg);
    }

    .circle-list>.circle:nth-child(2) {
      background-image: url(./images/02.jpg);
    }

    .circle-list>.circle:nth-child(3) {
      background-image: url(./images/03.jpg);
    }

    .circle-list>.circle:nth-child(4) {
      background-image: url(./images/04.jpg);
    }

    .circle-list>.circle:nth-child(5) {
      background-image: url(./images/05.jpg);
    }
  </style>
</head>

<body>
  <div id="wrap">
    <!-- 图片 -->
    <div class="imgList">
      <img src="./images/01.jpg" alt="">
      <img src="./images/02.jpg" alt="">
      <img src="./images/03.jpg" alt="">
      <img src="./images/04.jpg" alt="">
      <img src="./images/05.jpg" alt="">
    </div>

    <!-- 左右箭头 -->
    <div class="arrow">
      <a href="javascript:;" class="left">👈</a>
      <a href="javascript:;" class="right">👉</a>
    </div>

    <!-- 小圆点 -->
    <ul class="circle-list">
      <li class="circle active" data-n="0"></li>
      <li class="circle" data-n="1"></li>
      <li class="circle" data-n="2"></li>
      <li class="circle" data-n="3"></li>
      <li class="circle" data-n="4"></li>
    </ul>
  </div>

  <script>
    let arrowRight = document.querySelector('.right')
    let arrowLeft = document.querySelector('.left')
    let imgList = document.querySelector('.imgList')

    // 克隆第一张图
    let cloneFistImg = imgList.firstElementChild.cloneNode();
    // 将克隆的第一张图放到末尾
    imgList.appendChild(cloneFistImg)
    let index = 0;

    // 节流阀 限流，不然点击过快会看到瑕疵😂
    let lock = true;
    // 右按钮
    arrowRight.addEventListener('click', () => {
      // console.log('?')
      autoRight()
    })
    // 右按钮切换图片
    function autoRight() {
      if (!lock) return
      index++
      imgList.style.left = index * (-820) + 'px'
      imgList.style.transition = 'all, 0.5s'
      if (index === 5) {
        index = 0
        setTimeout(() => {
          // index = 0
          imgList.style.left = 0
          imgList.style.transition = 'none'
        }, 500)
      }
      setCircles()

      // 关锁 限流
      lock = false
      setTimeout(() => {
        lock = true
      }, 500)
    }

    // 左按钮
    arrowLeft.addEventListener('click', () => {
      if (!lock) return
      index--
      if (index === -1) {
        imgList.style.left = 5 * (-820) + 'px'
        imgList.style.transition = 'none'
        index = 4
        // 宏任务，等以上执行完再执行
        setTimeout(() => {
          // index = 4
          imgList.style.left = index * (-820) + 'px'
          imgList.style.transition = 'all, 0.5s'
        })
      } else {
        imgList.style.left = index * (-820) + 'px'
      }
      setCircles()

      // 与右按钮同理
      lock = false;
      setTimeout(() => {
        lock = true
      }, 500)
    })

    // 获取小圆点
    const circles = document.querySelectorAll('.circle')
    // console.log(circles);
    // 小圆点选中显示
    function setCircles() {
      for (let i = 0; i < circles.length; i++) {
        if (i === index) {
          circles[i].classList.add('active')
        } else {
          circles[i].classList.remove('active')
        }
      }
    }
    // 小圆点点击切换图片 使用事件代理 给父级绑定点击事件
    const circleList = document.querySelector('.circle-list')
    circleList.addEventListener('click', (e) => {
      // console.log(Number(e.target.getAttribute('data-n')));
      // index为 number类型，所以 n 须转换成 number 类型
      const n = Number(e.target.getAttribute('data-n')) // 获取标签自定义属性
      index = n
      imgList.style.transition = 'all, 0.5s'
      imgList.style.left = index * (-820) + 'px'
      setCircles()
    })

    // 自动轮播
    let autoPlay = setInterval(() => {
      autoRight()
    }, 3000)
    // 鼠标移进轮播停止
    const wrap = document.getElementById('wrap')
    wrap.addEventListener('mouseenter', () => {
      clearInterval(autoPlay)
    })
    // 鼠标移出轮播继续
    wrap.addEventListener('mouseleave', () => {
      // 设表先关
      clearInterval(autoPlay)
      autoPlay = setInterval(() => {
        autoRight()
      }, 3000)
    })
  </script>
</body>

</html>